<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ECode-生成列表页</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/defalut.theme.css" />
</head>
<body>
    <!-- 顶头部 start -->
    <header>
        <div class="head">
            <div class="logo pull-left">
                <img width="40" height="30" src="./images/admin-logo.png" alt="">
                <b>&nbsp;&nbsp;E-code</b>
            </div>
            <div class="info-right pull-right">
                <ul>
                    <a href=""><li class="pull-right"><i class="glyphicon glyphicon-home"></i> 网站前台 </li></a>
                    <a  href=""><li class="pull-right"><i class="glyphicon glyphicon-refresh"></i> 清除缓存 </li></a>
                    <a href=""><li class="pull-right"><i class="glyphicon glyphicon-user"></i> 欢迎：Admin </li></a>
                </ul>
            </div>

        </div>
    </header>
    <!-- 顶头部 stop -->
    <aside>
        <div class="checkbox">
            <label>
                <input id="nav-path" type="checkbox"> 路径导航
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input id="back-panel" type="checkbox"> 背景面板-form
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input id="nav-serach-form" type="checkbox"> 搜索面板-form
            </label>
        </div>
        <div class="checkbox">
            <label>
                操作按扭
            </label>
                <button type="button" class="btn btn-primary btn-xs"  id="data-add-add">添加</button>
                <button type="button" class="btn btn-default btn-xs"  id="data-add-del">删除</button>
        </div>
        <div class="checkbox">
            <label>
                条件内联
            </label>
                <button type="button" class="btn btn-primary btn-xs add" data="map-inline-input">添加</button>
                <button type="button" class="btn btn-default btn-xs del" data="map-inline-input">删除</button>
        </div>
        <div class="checkbox">
            <label>
                下拉内联
            </label>
                <button type="button" class="btn btn-primary btn-xs add" data="map-inline-select">添加</button>
                <button type="button" class="btn btn-default btn-xs del" data="map-inline-select">删除</button>
        </div>
        <div class="checkbox">
            <label>
                下拉选项
            </label>
                <button type="button" class="btn btn-primary btn-xs add" data="map-select">添加</button>
                <button type="button" class="btn btn-default btn-xs del" data="map-select">删除</button>
        </div>
        <div class="checkbox">
            <label>
                输入框
            </label>
                <button type="button" class="btn btn-primary btn-xs add" data="map-input">添加</button>
                <button type="button" class="btn btn-default btn-xs del" data="map-input">删除</button>
        </div>
        <div class="checkbox">
            <label>
                搜索按扭
            </label>
                <button type="button" class="btn btn-primary btn-xs add" data="map-search">添加</button>
                <button type="button" class="btn btn-default btn-xs del" data="map-search">删除</button>
        </div>
        <div class="checkbox">
            <label>
                <input id="content-list" type="checkbox"> 列表内容
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input id="nav-page" type="checkbox"> 数字分页
            </label>
        </div>
        <div class="checkbox">
            <label>
                 操作
            </label>
                 <button type="button" class="btn btn-primary btn-xs" id="auto-page-add">生成代码</button>
                 <button type="button" class="btn btn-default btn-xs" id="auto-page-del">返回生成</button>
            
        </div>
    </aside>
    <div class="main"></div>
<!-- 隐藏组件 start -->
<div class="hide">
    <!-- 路径导航 -->
    <div class="nav-path">
        <ol  class="breadcrumb auto-nav-path">
          <li><i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;<a href="#">后台首页</a></li>
          <li class="active">后台管理中心</li>
        </ol>   
    </div>

    <!-- 背景面板 -->
    <div class="back-panel">
        <div class="panel panel-default auto-back-panel">
            <div class="panel-heading"> <i class="glyphicon glyphicon-th-list"></i> 列表页</div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <!-- 内容列表 -->
    <div class="content-list">
        <table class="table table-bordered table-hover auto-content-list">
            <tr><th><input name="id" id="all-box" type="checkbox"></th><th>会员昵称</th> <th>会员等级</th><th>邮件地址</th><th>手机号码</th><th>余额</th><th>状态</th><th>积分</th><th>注册日期</th><th>操作</th></tr>
            <tr>
                <td><input name="id" type="checkbox"></td>
                <td>鬼谷子</td>
                <td>白银会员</td>
                <td>dengyunrui@qq.com</td>
                <td>13800138006</td>
                <td> 238.90</td>
                <td>
                    <span class="e-status badge"><i class="glyphicon glyphicon-ok"></i></span>
                    <span class="badge"><i class="glyphicon glyphicon-remove"></i></span>
                </td>
                <td> 1300</td>
                <td>2009-06-15 14:49</td>
                <td>
                    <a href=""><span class="label label-primary e-action"><i class="glyphicon glyphicon-eye-open"></i></span></a>
                    <a href=""><span class="label label-info e-action"><i class="glyphicon glyphicon-pencil"></i></span></a>
                    <a href="javascript:;" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="label label-danger e-action"><i class="glyphicon glyphicon-trash"></i></span></a>
                </td>
            </tr>
            <tr>
                <td><input name="id" type="checkbox"></td>
                <td>鬼谷子</td>
                <td>白银会员</td>
                <td>dengyunrui@qq.com</td>
                <td>13800138006</td>
                <td> 238.90</td>
                <td>
                    <span class="e-status badge"><i class="glyphicon glyphicon-ok"></i></span>
                    <span class="badge"><i class="glyphicon glyphicon-remove"></i></span>
                </td>
                <td> 1300</td>
                <td>2009-06-15 14:49</td>
                <td>
                    <a href=""><span class="label label-primary e-action"><i class="glyphicon glyphicon-eye-open"></i></span></a>
                    <a href=""><span class="label label-info e-action"><i class="glyphicon glyphicon-pencil"></i></span></a>
                    <a href=""><span class="label label-danger e-action"><i class="glyphicon glyphicon-trash"></i></span></a>
                </td>
            </tr>
        </table> 
    </div>

    <!-- 数字分页 -->
    <div class="nav-page">
        <nav aria-label="..." class="auto-nav-page">
            <ul class="pagination">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
            </ul>
        </nav>
    </div>

    <!-- 搜索form  -->
    <div class="nav-serach-form">
        <nav class="navbar navbar-default auto-nav-serach-form">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2"><form class="navbar-form navbar-left auto-data-update"></form></div>
                    <div class="col-md-10 auto-data-form"><form class="navbar-form navbar-right auto-data-map" role="search"></form></div>
                </div>
            </div>
        </nav>
    </div>

    <!-- 按扭组件 -->
    <div class="data-add-add">
        <a href="" class="auto-data-add-add"><button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> 按扭</button></a>
    </div>

    <!-- 内联输入组件 -->
    <div class="map-inline-input">
        <div class="input-group auto-map-inline-input">
            <span class="input-group-addon" id="sizing-addon1">关键字</span>
            <input type="text" class="form-control" placeholder="大家都在搜" aria-describedby="sizing-addon1">
        </div>
    </div>

    <!-- 内联下拉框组件 -->
    <div class="map-inline-select">
        <div class="input-group auto-map-inline-select">
            <div class="input-group-btn">
                <select class="form-control">
                    <option>请选择</option>
                    <option>手机号</option>
                    <option>用户名</option>
                </select>
            </div>
            <input type="text" class="form-control" aria-label="...">
        </div>
    </div>

    <!-- 下拉框组件 -->
    <div class="map-select">
        <div class="input-group auto-map-select">
            <select class="form-control" name="" id="">
              <option>支付状态</option>
              <option>已支付</option>
              <option>未支付</option>
            </select>
        </div>
    </div>

    <!-- 输入框 -->
    <div class="map-input">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
    </div>
    
    <!-- 搜索按扭 -->
    <div class="map-search">
        <button type="submit" class="btn btn-default auto-map-search"><i class="glyphicon glyphicon-search"></i> 筛选</button>
    </div>
</div>
<!-- 隐藏组件 end -->

<!-- 代码区域 start -->
<div id="buildArea"  style="margin-top:100px;float:left;margin-left:50px;display:none">
<h3>将代码复制到 public.html 中的 .main 里 另存一个新文件 ^_^</h3> <br>
<textarea name="" id="build" cols="150" rows="30"></textarea>
</div>
<!-- 代码区域 end -->
</body>
<script src="./javascript/jquery.min.js"></script>
<script src="./javascript/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="./javascript/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="./javascript/Chart.js"></script>
<script src="./javascript/bootstrap.min.js"></script>
<script src="./javascript/defalut.theme.js"></script>
<script>
    $(function(){
        // 左侧菜单展开事件
        $('.left-nav').click(function(){
            $('.left-nav').children('dt').children('.arrow-right').removeClass('glyphicon-menu-down');
            $('.left-nav dl').hide("slow");
            $(this).children('dl').stop(true, false).slideToggle("slow");
            $(this).children('dt').children('.arrow-right').addClass('glyphicon-menu-down');
        });
        //时间控件
        $(".form_datetime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",

        });
        //全选 全不选
        $("#all-box").click(function(){
            if($(this).is(":checked")){
                $("input[name='id']").prop("checked",true);
            }else{
                $("input[name='id']").prop("checked",false);
            }
        });

        //添加路径导航
        $("#nav-path").click(function(){
            var html    = $(".nav-path").html();
            var status  = $(this).is(":checked");
            if(status) {
                $('.main').append(html);
            } else {
                $(".main .auto-nav-path").remove();
            }
        });
        //添加背景面板
        $("#back-panel").click(function(){
            var html    = $(".back-panel").html();
            var status  = $(this).is(":checked");
            if(status) {
                $('.main').append(html);
            } else {
                $(".main .auto-back-panel").remove();
            }
        });
        //添加搜索面板
        $("#nav-serach-form").click(function(){
            var html    = $(".nav-serach-form").html();
            var status  = $(this).is(":checked");
            if(status) {
                $('.main .panel-body').append(html);
            } else {
                $(".main .auto-nav-serach-form").remove();
            }
        });
        //添加内容列表
        $("#content-list").click(function(){
            var html    = $(".content-list").html();
            var status  = $(this).is(":checked");
            if(status) {
                $('.main .panel-body').append(html);
            } else {
                $(".main .auto-content-list").remove();
            }
        });
        //添加数字分页
        $("#nav-page").click(function(){
            var html    = $(".nav-page").html();
            var status  = $(this).is(":checked");
            if(status) {
                $('.main .panel-body').append(html);
            } else {
                $(".main .auto-nav-page").remove();
            }
        });
        //添加按扭
        $("#data-add-add").click(function(){
            var html = $(".data-add-add").html();
            $(".main .auto-data-update").append(html)
        });
        //删除按扭
        $("#data-add-del").click(function(){
            var html= $(".main .auto-data-add-add");
            var htmlNum = html.length - 1;
            if(htmlNum >= 0) {
                html[htmlNum].remove();
            }
        });

        //搜索控件
        $(".add").click(function(){
            var data = $(this).attr('data');
            var html = $("."+data).html();
            $(".main .auto-data-map").append(html);
        });
        //生成
        $("#auto-page-add").click(function(){
            var html = $(".main").html();
            console.log(html);
            $(".main").hide();
            $("#build").val(html);
            $("#buildArea").show();
        });
        //重新生成
        $("#auto-page-del").click(function(){
            $(".main").show();
            $("#buildArea").hide();
        }); 

    });
</script>    
</body>
</html>